﻿<template>
    <l-layout class="l-tab-page erpCase" v-if="!lr_loadPage">

        <l-panel>
            <template #toolLeft>
                <div class="header_name">{{ $t('销售订单') }}</div>
            </template>
            <template #toolRight>
                <!-- 搜索框 -->
                <el-input :placeholder="$t('输入内容')" @keyup.enter.native="handleSearch" v-model="queryData.f_Theme"
                    size="mini">
                    <el-button @click="handleSearch" slot="append" icon="el-icon-search"></el-button>
                </el-input>

                <l-tool-btns :hasRefresh="false" @setting="lr_handleSettingTable" @click="handleAdd()">
                    <l-excel-btns></l-excel-btns>
                </l-tool-btns>



            </template>
            <l-table ref="mainTable" :loading="tableLoading" :columns="lr_getPageColumns(columns)"
                :dataSource="tableData" :isPage="true" :pageTotal="tableTotal" :tablePage.sync="tableCurrentPage"
                @loadPageData="turnTablePage">
                <!-- 产品概要 -->
                <template v-slot:f_ProductSynopsis="scope">
                    <el-popover placement="bottom-start" :title="$t('物料概要')" width="140" trigger="hover"
                        v-if="scope.row.f_ProductSynopsis" popper-class="erpcase-apply-popover">
                        <div slot="reference">
                            {{ getSynopsis(scope.row.f_ProductSynopsis) }}
                            <i class="el-icon-caret-bottom"></i>
                        </div>
                        <div class="popover-list">
                            <div class="popover-list-item" :key="index"
                            
                                v-for="(item, index) in scope.row.f_ProductSynopsis.split(',')">
                                <p style=" overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 120px;">{{ item }}</p>
                            </div>
                        </div>
                    </el-popover>
                </template>
                <!-- 出库 -->
                <template v-slot:f_OutStoreState="scope">
                    <i v-if="scope.row.f_OutStoreState == 0" style="font-size: 20px"
                        class="learun-icon-circle-correct-base learun-success"></i>
                    <i v-else style="font-size: 20px" class="learun-icon-circle-sigh-base learun-error"></i>
                </template>
                <!-- 开票 -->
                <template v-slot:f_InvoiceState="scope">
                    <i v-if="scope.row.f_InvoiceState == 0" style="font-size: 20px"
                        class="learun-icon-circle-correct-base learun-success"></i>
                    <i v-else style="font-size: 20px" class="learun-icon-circle-sigh-base learun-error"></i>
                </template>
                <!-- 收款 -->
                <template v-slot:f_GatherState="scope">
                    <i v-if="scope.row.f_GatherState == 0" style="font-size: 20px"
                        class="learun-icon-circle-correct-base learun-success"></i>
                    <i v-else style="font-size: 20px" class="learun-icon-circle-sigh-base learun-error"></i>
                </template>

                <l-table-btns :btns="tableBtns" @click="lr_handleTableBtnClick"></l-table-btns>


            </l-table>
        </l-panel>

        <!--表单-->
        <l-dialog :title="$t(formTitle)" :visible.sync="formVisible" :height="800" :width="1200" @ok="handleSave"
            @close="handleCloseForm" @opened="handleOpenedForm">
            <detail-form v-if="formTitle == '查看订单Details'" ref="detailForm" @refHandleDelete="handleDelete"
                :isReadOnly="formDetails"></detail-form>
            <my-form v-else ref="form" :isReadOnly="formDetails"></my-form>
        </l-dialog>

    </l-layout>
</template>

<script>
import MyForm from './form'
import DetailForm from './detailForm'
const api = window.$api.erpcase.sale

export default {
    components: {
        MyForm,
        DetailForm,
    },
    data() {
        return {
            lr_isPage: true,
            moduleCode: 'ERP_Sale',

            // query参数
            queryData: {
                f_Theme: '',
            },

            queryItems: [
                { label: '订单主题', prop: 'f_Theme' },
            ],

            // 表格参数
            tableLoading: false,
            tableData: [],
            tableTotal: 0,
            tableCurrentPage: 1,
            tablePageSize: 50,
            columns: [
                { label: '销售单号', prop: 'f_Number', minWidth: 140, align: 'left', dataType: 'encode', isNotAutoWrap: true, fixed: true },
                { label: '销售订单主题', prop: 'f_Theme', minWidth: 230, align: 'left', dataType: 'input', isNotAutoWrap: true, fixed: true },
                { label: '客户名称', prop: 'f_ClientName', minWidth: 230, align: 'left', dataType: 'dataSource', dataCode: 'ERP_Customers', valueKey: 'f_id', labelKey: 'f_name' },
                { label: '销售日期', prop: 'f_SaleDate', minWidth: 120, align: 'left', dataType: 'datetime', format: 'yyyy-MM-dd' },
                { label: '产品概要', prop: 'f_ProductSynopsis', minWidth: 120, align: 'left', isNotAutoWrap: true },
                { label: '总金额', prop: 'f_AmountSum', minWidth: 100, align: 'left', dataType: 'input' },
                { label: '优惠后金额', prop: 'f_Discount', minWidth: 100, align: 'left', dataType: 'input' },
                { label: '已收金额', prop: 'f_AlreadyAmount', minWidth: 100, align: 'left', dataType: 'input' },
                { label: '已到票金额', prop: 'f_AlreadyTicket', minWidth: 100, align: 'left', dataType: 'input' },
                { label: '出库', prop: 'f_OutStoreState', minWidth: 80, align: 'left', dataType: 'input' },
                { label: '开票', prop: 'f_InvoiceState', minWidth: 80, align: 'left', dataType: 'input' },
                { label: '收款', prop: 'f_GatherState', minWidth: 80, align: 'left', dataType: 'input' },
            ],
            tableBtns: [
                { prop: 'Details', label: '查看',width:40 },
                { prop: 'Edit', label: 'Edit',width:40 },
                { prop: 'Delete', label: 'Delete',width:40 },
            ],

            // 表单参数
            formVisible: false,
            formTitle: '',
            formEditRow: null,
            formEdit: false,
            formDetails: false,
        }
    },

    mounted() {
        this.init()
    },
    methods: {
        init() {
            this.loadTableData()


        },

        handleSearch() {
            this.loadTableData()
        },
        turnTablePage({ rows }) {
            this.tablePageSize = rows
            this.loadTableData(true)
        },
        async loadTableData(isNotFirst) {
            if (!isNotFirst) {
                this.tableCurrentPage = 1
            }
            this.tableLoading = true
            let queryData = this.$deepClone(this.queryData)

            queryData.rows = this.tablePageSize
            queryData.page = this.tableCurrentPage
            queryData.sidx = 'F_CreateDate DESC'
            // queryData.f_TicketState = '0'
            let data = await this.$awaitWraper(api.getPage(queryData))
            if (data != null) {
                
                // for (let i in data.rows) {
                //     if (data.rows[i].f_ProductSynopsis != null) {

                //         data.rows[i].f_ProductSynopsis = data.rows[i].f_ProductSynopsis.split(',')

                //     }
                // }
                this.tableData = data.rows
                this.tableTotal = data.records
            }
            else {
                this.tableData = []
            }
            this.tableLoading = false
        },
        getSynopsis(str) {
            const list = str.split(",");
            if (list.length == 1) {
                return `${list[0].split(":")[0]}`;
            }
            return `${list[0].split(":")[0]}等${list.length}项`;
        },
        handleEdit($index, row) {
            // console.log('handleEdit',$index, row)
            this.formVisible = false

            this.formEdit = true
            this.formDetails = false
            this.formEditRow = row
            this.handleShowForm('Edit')
        },
        handleDetails($index, row) {
            this.formEdit = true
            this.formDetails = false
            this.formEditRow = row
            this.handleShowForm('查看订单Details')
        },
        handleDelete($index, row) {
            console.log('Delete')
            this.$confirm(this.$t('This operation will permanently delete the data. Do you want to continue?'), this.$t('Tips'), {
                confirmButtonText: this.$t('confirm'),
                cancelButtonText: this.$t('cancel'),
                type: 'warning'
            }).then(async () => {
                this.tableData.splice($index, 1);
                this.tableTotal--
                await api.remove(row.f_Id)
                this.$message({
                    type: 'success',
                    message: this.$t('Delete  success')
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: this.$t('Delete has been canceled!')
                })
            })
        },
        handleAdd() {
            this.formEdit = false
            this.formDetails = false
            this.handleShowForm('Add订单')
        },

        async handleSave(showLoading, hideLoading) {
            showLoading('saving data...')
            if (this.formTitle == '查看订单Details') {
                if (await this.$refs.detailForm.validateForm()) {
                    const res = await this.$refs.detailForm.saveForm({ keyValue: this.formEdit ? this.formEditRow.f_Id : '', isEdit: this.formEdit })
                    if (res) {
                        const msg = this.formEdit ? '更新成功!' : 'Add成功!'
                        this.$message({
                            type: 'success',
                            message: this.$t(msg)
                        })
                        this.loadTableData()
                        this.formVisible = false
                    }
                }
            } else {
                if (await this.$refs.form.validateForm()) {
                    const res = await this.$refs.form.saveForm({ keyValue: this.formEdit ? this.formEditRow.f_Id : '', isEdit: this.formEdit })
                    if (res) {
                        const msg = this.formEdit ? '更新成功!' : 'Add成功!'
                        this.$message({
                            type: 'success',
                            message: this.$t(msg)
                        })
                        this.loadTableData()
                        this.formVisible = false
                    }
                }
            }

            hideLoading()
        },

        handleShowForm(text) {
            this.formTitle = text
            this.formVisible = true
        },
        async handleOpenedForm(showLoading, hideLoading) {
            if (this.formEdit) {
                showLoading('Loading data...')
                if (this.formTitle == '查看订单Details') {
                    await this.$refs.detailForm.loadFormData({ keyValue: this.formEditRow.f_Id })
                } else {
                    await this.$refs.form.loadFormData({ keyValue: this.formEditRow.f_Id })
                }

                hideLoading()
            }
        },
        async handleCloseForm() {
            if (this.formTitle == '查看订单Details') {
                this.$refs.detailForm.resetForm()
            } else {
                this.$refs.form.resetForm()
            }

        }
    }
}
</script>
